<template>
    <view class="container">
        <form @submit="submit" @reset="reset">
            <!-- 查询信息配置 -->
            <view class="form-content">
                <!-- 设备mid -->
                <form-item label="设备ID">
                    <text>{{ form.mid }}</text>
                </form-item>
                <!-- 客户名称 -->
                <form-item label="客户名称">
                    <input
                        placeholder="请输入客户名称"
                        :value="form.customName"
                        @input="customNameChange"
                    />
                </form-item>
                <!-- 运单号 -->
                <form-item label="运单号">
                    <view class="form-prefix">
                        <input
                            placeholder="请输入运单号"
                            :value="form.trackID"
                            @input="trackIdChange"
                        />
                        <view
                            class="icon iconfont icon-scanning"
                            @click="trackIdScanCode"
                        ></view>
                    </view>
                </form-item>
                <!-- 箱号 -->
                <form-item label="箱号">
                    <view class="form-prefix">
                        <input
                            placeholder="请输入箱号"
                            :value="form.boxID"
                            @input="boxIdChange"
                        />
                        <view
                            class="icon iconfont icon-scanning"
                            @click="boxIdScanCode"
                        ></view>
                    </view>
                </form-item>
                <!-- 查询码 -->
                <form-item label="查询码">
                    <input
                        placeholder="请输入查询码"
                        :value="form.customCheckIDInput"
                        @input="checkIdChange"
                    />
                </form-item>
                <!-- 备注 -->
                <form-item label="备注">
                    <input
                        placeholder="备注信息"
                        :value="form.noteMark"
                        @input="noteMarkChange"
                    />
                </form-item>
            </view>
            <!-- 记录仪配置内容 -->
            <view class="form-content">
                <!-- 温度范围 -->
                <form-item label="温度范围">
                    <view class="form-temperature">
                        <view>
                            <text>上限</text>
                            <picker
                                class="value"
                                :value="form.maxtempIndex"
                                :range="temperatureOptions"
                                @change="maxtempChange"
                            >
                                <text>{{ form.maxtempIndex }}</text>
                            </picker>
                            <text>{{ temperature }}</text>
                        </view>
                        <view>
                            <text>下限</text>
                            <picker
                                class="value"
                                :value="form.mintempIndex"
                                :range="temperatureOptions"
                                @change="mintempChange"
                            >
                                <text>{{ form.mintempIndex }}</text>
                            </picker>
                            <text>{{ temperature }}</text>
                        </view>
                    </view>
                </form-item>
                <!-- 记录间隔 -->
                <form-item label="记录间隔">
                    <view class="space-between align-center">
                        <number-input
                            :value="form.recInterval"
                            @change="recIntervalChange"></number-input>
                        <text>分钟</text>
                    </view>
                </form-item>
                <!-- 启动方式 -->
                <form-item label="启动方式">
                    <radio-group
                        name="radio"
                        class="form-radio"
                        @change="startModeChange"
                    >
                        <label class="radio-box">
                            <radio value="1" :checked="form.startMode == '1'" />
                            <text class="radio-text">按键启动</text>
                        </label>
                        <label class="radio-box">
                            <radio value="2" :checked="form.startMode == '2'" />
                            <text class="radio-text">软件启动</text>
                        </label>
                    </radio-group>
                </form-item>
                <!-- 延时时间 -->
                <form-item label="延时时间" v-if="form.startMode == '1'">
                    <view class="space-between align-center">
                        <number-input
                            :value="form.recDelay"
                            @change="recDelayChange"
                        ></number-input>
                        <text>分钟</text>
                    </view>
                </form-item>
                <!-- 定时时间 -->
                <form-item label="定时时间" v-else>
                    <view class="form-picker">
                        <picker
                            mode="date"
                            :value="form.nowdatedis"
                            @change="nowdatedisChange"
                        >
                            <text>{{ form.nowdatedis }}</text>
                        </picker>
                        <picker
                            class="picker-time"
                            mode="time"
                            :value="form.nowtimedis"
                            @change="nowtimedisChange"
                        >
                            <text>{{ form.nowtimedis }}</text>
                        </picker>
                    </view>
                </form-item>
            </view>
            <!-- 记录仪系统设置 -->
            <view class="form-content">
                <!-- PDF语言 -->
                <form-item label="PDF语言">
                    <view class="space-between" @click="changeLanguage">
                        <text>{{ language }}</text>
                        <view class="iconfont icon-arrow-right"></view>
                    </view>
                </form-item>
                <!-- 温度单位 -->
                <form-item label="温度单位">
                    <view
                        class="space-between"
                        @click="changeUnitOfTemperature"
                    >
                        <text>{{ temperature }}</text>
                        <view class="iconfont icon-arrow-right"></view>
                    </view>
                </form-item>
                <!-- 软件停止 -->
                <form-item label="软件停止">
                    <switch
                        name="switch"
                        class="form-switch"
                        :checked="form.appstop"
                        @change="appstopChange"
                    />
                </form-item>
            </view>
            <!-- 保存 -->
            <view class="form-action">
                <button type="primary" form-type="submit">保存</button>
            </view>
        </form>
    </view>
</template>

<script>
import moment from 'moment'
import formItem from '@/components/utils-ui/form-item.vue'
import numberInput from '@/components/utils-ui/input-number.vue'
import scanCode from '@/utils/scan-code.js'
import svaeConfig from '@/static/js/ble-handler/device-config'
const countries = ['简体中文', 'English'] // 语言选项
const unitTemperature = ['℃', '℉'] // 温度选项
export default {
    components: {
        'form-item': formItem, // 表单item
        'number-input': numberInput // 数字输入框
    },
    data() {
        return {
            startDate: '', // 有效日期开始
            endDate: '', // 有效日期结束
            temperatureOptions: [], // 温度上下限范围
            form: {
                deviceId: '', // 设备id
                mid: '', // 显示ID
                customName: 'username', // 客户名称
                trackID: '666', // 运单号
                boxID: '999', // 箱号
                customCheckIDInput: '', // 查询码
                noteMark: '', // 备注
                maxtempIndex: 10, // 温度范围上限
                mintempIndex: -11, // 温度范围下限
                recInterval: 5, // 记录间隔
                startMode: '1', // 启动方式 （1:按键启动 2:定时启动）
                recDelay: 5, // 延时时间
                nowdatedis: '', // 定时日期
                nowtimedis: '', // 定时时间
                countryIndex: 0, // 语言
                unitIndex: 0, // 温度
                appstop: false // 软件停止
            }
        }
    },
    computed: {
        deviceData() {
            const devices = this.$store.state['set-bluetooth'].setDevicesList
            const list = devices.filter(item => item.deviceId == this.form.deviceId)
            return list
        },
        // 选择的语言
        language() {
            return countries[this.form.countryIndex]
        },
        // 选择的温度单位
        temperature() {
            return unitTemperature[this.form.unitIndex]
        }
    },
    onLoad(res) {
        console.log('配置的设备', res)
        Object.assign(this.form, res)
        this.setDateScope()
        this.setTemperatureOptions()
    },
    methods: {
        // 客户姓名
        customNameChange(e) {
            this.form.customName = e.detail.value
        },
        // 运单扫码
        trackIdScanCode() {
            scanCode().then(res => {
                this.form.trackID = res
            })
        },
        // 运单输入
        trackIdChange(e) {
            this.form.trackID = e.detail.value
        },
        // 货箱扫码
        boxIdScanCode() {
            scanCode().then(res => {
                this.form.boxID = res
            })
        },
        // 箱号扫码
        boxIdChange(e) {
            this.form.boxID = e.detail.value
        },
        // 查询码
        checkIdChange(e) {
            this.form.customCheckIDInput = e.detail.value
        },
        // 备注
        noteMarkChange(e) {
            this.form.noteMark = e.detail.value
        },
        /*
         * 设置温度范围选项
         * @param {String} type 0:摄氏度；1:华氏度
         */
        setTemperatureOptions(type = 0) {
            const n = type == 0 ? -40 : -4
            const m = type == 0 ? 70 : 158
            const arr = Array.from({
                length: m + 1 - n
            }, (v, i) => n + i)
            this.temperatureOptions = arr
        },
        // 设置定时时间范围
        setDateScope() {
            const year = moment().year() // 当前年
            const minute = moment().add(10, 'm') // 10分钟后
            this.startDate = (year - 60).toString()
            this.endDate = (year + 60).toString()
            this.form.nowdatedis = moment().format('YYYY-MM-DD')
            this.form.nowtimedis = moment(minute).format('HH:mm')
        },
        // 温度上限选择
        maxtempChange(e) {
            this.form.maxtempIndex = this.temperatureOptions[e.detail.value]
        },
        // 温度下限选择
        mintempChange(e) {
            this.form.mintempIndex = this.temperatureOptions[e.detail.value]
        },
        // 记录间隔
        recIntervalChange(val) {
            this.form.recInterval = val
        },
        // 启动方式
        startModeChange(e) {
            this.form.startMode = e.detail.value
        },
        // 延时时间选择
        recDelayChange(val) {
            this.form.recDelay = val
        },
        // 定时日期选择
        nowdatedisChange(e) {
            this.form.nowdatedis = e.detail.value
        },
        // 定时日期选择
        nowtimedisChange(e) {
            this.form.nowtimedis = e.detail.value
        },
        // 选择语言
        changeLanguage() {
            uni.showActionSheet({
                itemList: countries,
                success: res => {
                    this.form.countryIndex = res.tapIndex
                }
            })
        },
        // 选择温度单位
        changeUnitOfTemperature() {
            uni.showActionSheet({
                itemList: unitTemperature,
                success: res => {
                    this.form.unitIndex = res.tapIndex
                    this.setTemperatureOptions(res.tapIndex) // 设置温度上下限范围
                    this.form.maxtempIndex = 0 // 重置温度上限
                    this.form.mintempIndex = 0 // 重置温度下限
                }
            })
        },
        // 软件停止选择
        appstopChange(e) {
            this.form.appstop = e.detail.value
        },
        // submit
        submit() {
            svaeConfig(this.form)
        },
        reset() {

        }
    }
}
</script>

<style lang="less" scoped>
@import '../../static/css/form-wrap.less';
.container {
    padding: 0 30rpx;
}

// 温度范围选择
.form-temperature {
    display: flex;

    > view {
        flex: 1;
        display: flex;
    }

    .value {
        margin: 0 20rpx;
    }
}

// 单选
.form-radio {
    display: flex;
    align-items: center;

    .radio-box {
        flex: 1;

        .radio-text {
            margin-left: 10rpx;
        }
    }
}

// 开关
.form-switch {
    display: flex;
    transform: scale(0.8);
}

// 定时时间
.form-picker {
    display: flex;

    .picker-time {
        margin-left: 30rpx;
    }
}
</style>
